<script setup lang="ts">
import VDialog from "@/components/VDialog/VDialog.vue";
import { computed, reactive, ref, watch } from "vue";
import {
  saveSirSelfCheckApi,
  getSirSelfCheckDetailApi,
  type SirSelfCheckBo
} from "@/api/airport/dataManage/sirSelfCheck";
import { ElMessage, FormInstance, FormRules } from "element-plus";

interface Props {
  type: "add" | "update";
  modelValue: boolean;
  row?: SirSelfCheckBo;
}

const props = defineProps<Props>();
const emits = defineEmits<{
  (e: "update:modelValue", v: boolean): void;
  (e: "success"): void;
}>();

const visible = computed({
  get: () => props.modelValue,
  set(v) {
    emits("update:modelValue", v);
  }
});

const formData = reactive<SirSelfCheckBo>({
  id: 0,
  seq: undefined,
  professional: "",
  checkContent: "",
  checkStandardCode: "",
  checkStandard: "",
  complianceCriteria: "",
  checkMethod: "",
  companyBasis: "",
  companyClause: "",
  lawsBasis: "",
  lawsClause: "",
  baseCycle: "",
  integrationSource: "",
  checkDepartments: "",
});

const rules: FormRules = {
  seq: [{ required: true, message: "序号不能为空", trigger: "blur" }],
  professional: [{ required: true, message: "专业不能为空", trigger: "blur" }],
  checkContent: [
    { required: true, message: "检查内容不能为空", trigger: "blur" }
  ],
  checkStandardCode: [
    { required: true, message: "检查标准编号不能为空", trigger: "blur" }
  ],
  checkStandard: [
    { required: true, message: "检查标准不能为空", trigger: "blur" }
  ],
  complianceCriteria: [
    { required: true, message: "符合性判定标准不能为空", trigger: "blur" }
  ],
  checkMethod: [
    { required: true, message: "检查方式不能为空", trigger: "blur" }
  ],
  companyBasis: [
    { required: true, message: "公司依据不能为空", trigger: "blur" }
  ],
  companyClause: [
    { required: true, message: "公司条款不能为空", trigger: "blur" }
  ],
  lawsBasis: [
    { required: true, message: "法律法规依据不能为空", trigger: "blur" }
  ],
  lawsClause: [
    { required: true, message: "法律法规条款不能为空", trigger: "blur" }
  ],
  baseCycle: [
    { required: true, message: "基础周期不能为空", trigger: "blur" }
  ],
  integrationSource: [
    { required: true, message: "融合来源不能为空", trigger: "blur" }
  ],
  checkDepartments: [
    { required: true, message: "检查涉及部门不能为空", trigger: "blur" }
  ],
};

const formRef = ref<FormInstance>();
const loading = ref(false);

async function getDetail() {
  if (props.type === "add" || !props.row?.id) return;
  loading.value = true;
  try {
    const res = await getSirSelfCheckDetailApi(props.row.id);
    Object.assign(formData, res.data);
  } finally {
    loading.value = false;
  }
}

async function handleConfirm() {
  try {
    await formRef.value?.validate();
    loading.value = true;
    await saveSirSelfCheckApi(formData);
    ElMessage.success("操作成功");
    visible.value = false;
    emits("success");
  } catch (e) {
    console.error(e);
    ElMessage.error((e as Error)?.message || "操作失败");
  } finally {
    loading.value = false;
  }
}

// 打开弹窗时初始化数据
watch(
  () => props.modelValue,
  val => {
    if (val) {
      Object.assign(
        formData,
        props.row || { // 修改模式使用props.row，包含id
          id: null, // 仅新增模式生效
          seq: undefined,
          professional: "",
          checkContent: "",
          checkStandardCode: "",
          checkStandard: "",
          complianceCriteria: "",
          checkMethod: "",
          companyBasis: "",
          companyClause: "",
          lawsBasis: "",
          lawsClause: "",
          baseCycle: "",
          integrationSource: "",
          checkDepartments: ""
        }
      );
      if (props.type === "update") {
        getDetail(); // 进一步确保数据准确性
      }
    }
  },
  { immediate: true }
);
</script>

<template>
  <v-dialog
    show-full-screen
    :fixed-body-height="false"
    use-body-scrolling
    :title="type === 'add' ? '新增自查事项' : '编辑自查事项'"
    v-model="visible"
    :loading="loading"
    @confirm="handleConfirm"
    @cancel="visible = false"
  >
    <el-form :model="formData" label-width="120px" :rules="rules" ref="formRef">
      <!-- 序号 -->
      <el-form-item prop="seq" label="序号" required>
        <el-input v-model="formData.seq" />
      </el-form-item>

      <!-- 占半行的字段 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="professional" label="专业" required>
            <el-input v-model="formData.professional" placeholder="请输入专业" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="checkStandardCode" label="检查标准编号" required>
            <el-input v-model="formData.checkStandardCode" placeholder="请输入检查标准编号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="companyClause" label="公司条款" required>
            <el-input v-model="formData.companyClause" placeholder="请输入公司条款" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="baseCycle" label="基础周期" required>
            <el-input v-model="formData.baseCycle" placeholder="请输入基础周期" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="checkDepartments" label="检查涉及部门" required>
            <el-input v-model="formData.checkDepartments" placeholder="请输入检查涉及部门" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 占一行的字段 -->
      <el-form-item prop="checkContent" label="检查内容" required>
        <el-input
          v-model="formData.checkContent"
          type="textarea"
          rows="1"
          placeholder="请输入检查内容"
        />
      </el-form-item>
      <el-form-item prop="checkMethod" label="检查方式" required>
        <el-input v-model="formData.checkMethod" placeholder="请输入检查方式" />
      </el-form-item>
      <el-form-item prop="companyBasis" label="公司依据" required>
        <el-input v-model="formData.companyBasis" placeholder="请输入公司依据" />
      </el-form-item>
      <el-form-item prop="integrationSource" label="融合来源" required>
        <el-input v-model="formData.integrationSource" placeholder="请输入融合来源" />
      </el-form-item>

      <!-- 占多行的大型文本输入框 -->
      <el-form-item prop="checkStandard" label="检查标准" required>
        <el-input
          v-model="formData.checkStandard"
          type="textarea"
          rows="12"
          placeholder="请输入检查标准"
        />
      </el-form-item>
      <el-form-item prop="complianceCriteria" label="符合性判定标准" required>
        <el-input
          v-model="formData.complianceCriteria"
          type="textarea"
          rows="12"
          placeholder="请输入符合性判定标准"
        />
      </el-form-item>
      <el-form-item prop="lawsBasis" label="法律法规依据" required>
        <el-input
          v-model="formData.lawsBasis"
          type="textarea"
          rows="4"
          placeholder="请输入法律法规依据"
        />
      </el-form-item>
      <el-form-item prop="lawsClause" label="法律法规条款" required>
        <el-input
          v-model="formData.lawsClause"
          type="textarea"
          rows="4"
          placeholder="请输入法律法规条款"
        />
      </el-form-item>
    </el-form>
  </v-dialog>
</template>

